<template>
  <div class="hello">
     {{text}}
     <List @select="aaa"/>
     <router-link to="/rule/foo/post/123">Go to Bar</router-link> 
    <label for="app_upload">
      上传测试
      <input id="app_upload" @change='add_img'  type="file" accept="image/*" style="display:none;"> 
    </label>
    <h1>{{ msg }}</h1>
    <p>
      For guide and recipes on how to configure / customize this project,<br>
      check out the
      <a href="https://github.com/vuejs/vue-cli/tree/dev/docs" target="_blank">vue-cli documentation</a>.
    </p>
    <h3>Installed CLI Plugins</h3>
    <ul>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank">babel</a></li>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank">eslint</a></li>
    </ul>
    <h3>Essential Links</h3>
    <ul>
      <li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
      <li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
      <li><a href="https://chat.vuejs.org" target="_blank">Community Chat</a></li>
      <li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
    </ul>
    <h3>Ecosystem</h3>
    <ul>
      <li><a href="https://router.vuejs.org/en/essentials/getting-started.html" target="_blank">vue-router</a></li>
      <li><a href="https://vuex.vuejs.org/en/intro.html" target="_blank">vuex</a></li>
      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank">vue-devtools</a></li>
      <li><a href="https://vue-loader.vuejs.org/en" target="_blank">vue-loader</a></li>
      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
    </ul>
    <div class="test">
      <div class="left">
      </div>
      <div class="right">
      </div>
    </div>
  </div>
</template>

<script>
import "../assets/styles/init.scss";
import List from './List.vue';
const regExp = {
  isNumber: /^(([1-9])(\d+)?)$/,
  chinese: /[\u4E00-\u9FA5]/g,
  numbers: /^[0-9]+$/,
  email: /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/,
  isNumberOrLetter: /^(?![a-z]+$)(?![A-Z]+$)(?![0-9]+$)[a-zA-Z0-9]+$/,
  tirmAll: /\s/g,
  tirmStart: /^\s*/,
  trimEnd: /\s*$/,
  trim: /(^\s*)|(\s*$)/g,
  zipCode: /^[1-9]{1}\d{5}$/,
  cellPhone: /^1[34578][0-9]{9}$/,
  phone: /^0\d{2,3}-[2-9]\d{6,7}(-\d{0,4})?$/,
  phonereg: /^0?\d{3,4}$/,
  phone1reg: /^\d{7,8}$/,
  phone2reg: /^\d{1,4}$/,
  nickName: /^[0-9A-Za-z_]{4,20}$/,
  time: /^\d{4}-\d{2}-\d{2}$/
};
export default {
  name: "HelloWorld",
  props: {
    msg: String
  },
  data() {
    return {
      imgs: [],
      text: '000'
    };
  },
  components:{
    List
  },
  created(){
  },
  watch:{
    text(value,oldValue){

    }
  },
  methods: {
    aaa(text){
      console.log(text);
      this.text=text;
    },
    add_img(event) {
      var reader = new FileReader();
      var img1 = event.target.files[0];
      reader.readAsDataURL(img1);
      console.log(img1);
      var that = this;
      reader.onload = function() {
        that.imgs.push(reader.result);
      };
      reader.onerror = function() {
        //读取错误
        console.log("读取错误");
      };
      reader.onabort = function() {
        console.log("读取中断");
      };
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
/*
html { font-size: 100px; }
@media(min-width: 320px) { html { font-size: 100px; } }
@media(min-width: 360px) { html { font-size: 112.5px; } }
@media(min-width: 400px) { html { font-size: 125px; } }
@media(min-width: 640px) { html { font-size: 200px; } }
body {background:#efefef;font-size:.12rem;}
*/
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
.hello {
  .test {
    display: flex;
    .left {
      width: 200px;
      height: 200px;
      background: red;
      border: 1px solid #ddd;
    }
    .right {
      width: 200px;
      height: 200px;
      background: blue;
    }
  }
}
</style>
